<template>
  <header class="search-header">
    <div class="search-header-button">
      <router-link to="/">
        <mt-button icon="back"></mt-button>
        <!-- <i class="iconfont icon-fanhui"></i> -->
      </router-link>
    </div>
    <div class="search-header-content">
      <span class="search"><i class="iconfont icon-zhongxindingwei"></i></span>
      <input type="text" v-model="value" class="search-input" placeholder="请输入标题">
      <span class="clear" @click="reset" v-if="value"><i class="iconfont icon-guanbi"></i></span>
    </div>
  </header>
</template>

<script>
export default {
  name: 'HeadTop',
  data () {
    return {
      value: ''
    }
  },
  props: {
    fiexd: Boolean,
    title: String,
    placeholder: String
  },
  methods: {
    reset () {
      this.value = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.search-header {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  color: #252525;
  box-sizing: border-box;
  font-size: .32rem;
  height: 1.466667rem;
  line-height: 1;
  padding: .266667rem;
  white-space: nowrap;
  .mint-button {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
    display: inline-block;
    padding: 0;
    font-size: inherit;
    &::after {
      content: none;
    }
  }
  .search-header-content {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: .266667rem;
    padding-right: .266667rem;
    background-color: #eeeeee;
    border-radius: .266667rem;
    .search-input {
      flex: 1;
      height: 100%;
      line-height: 1;
      color: #86888e;
      background-color: #eeeeee;
    }
    .search {
      margin-left: .133333rem;
      padding: 0 .24rem;
      font-size: .32rem;
      color: #86888e;
    }
    .clear {
      color: #86888e;
      font-size: .32rem;
    }
  }
}
</style>
